<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        // 1.传统方式删除事件
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert('hi');
            divs[0].onclick = null;
        }
        // 2.事件侦听事件 addEventListener
        // (1) 里面的时间是字符串 必定加引号 而且不带 on
        // (2) 同一个元素，同一个事件可以添加多个侦听器（事件处理程序）
        divs[1].addEventListener('click',fn)
        function fn() {
            alert('22');
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent ie9以前支持
        // divs[2].attachEvent('onclick',fn)
        // function fn() {
        //     alert('33');
        //     divs[2].detachEvent('onclick',fn);
        // }
    </script>
</body>
</html>